<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
<body>
    <div id="section1">10年后</div>
    <div id="section2">5年后</div>
    <div id="section3">1年后</div>
</body>
</html>
<script>
        class myClass {
            constructor(obj){
                var div = document.querySelector(obj.el)
                div.onclick= function(){
                    obj.run()
                    div.style.background = obj.background
                    div.style.color = obj.color
                    div.style.width = obj.width
                    div.style.height = obj.height
                }
            }
        }
        new myClass({
            el:'#section1',
            color:'pink',
            background:'black',
            width:'80px',
            height:'80px',
            run:function(){
                alert('点击我，我就告诉你！')
            }
        });
        new myClass({
            el:'#section2',
            color:'blue',
            width:'50px',
            height:'50px',
            background:'black',
            run:function(){
                alert('点！')
            }
        });
        new myClass({
            el:'#section3',
            run:function(){
                alert('传入的dom类名不存在')
            }
        })
</script>